import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},

  // 拆分模块
  modules: {
    // key: value
    //    key - 模块名
    //    value - 这个模块对应的配置，它里面也会有 state、getters、mutations、actions、modules

    // 购物车模块
    cart: {
      // 当使用了 modules 选项拆分之后，一定要配置一个命名空间
      namespaced: true,

      state: {
        // 购物车数据
        cartList: [
          { id: 1, name: "apple", price: 100 },
          { id: 2, name: "banana", price: 200 },
        ],
      },

      getters: {
        length(state) {
          // state 是当前模块中定义的state
          return state.cartList.length;
        },

        total(state) {
          return state.cartList.reduce(
            (total, item) => (total += item.price),
            0
          );
        },
      },

      mutations: {
        addGood(state) {
          state.cartList.push({ id: 3, name: "orange", price: 300 });
        },
      },

      actions: {
        syncAddGood({ commit }, payload) {
          setTimeout(() => {
            commit("addGood");
          }, 1000);
        },
      },
    },

    // 用户模块
    user: {
      // 当使用了 modules 选项拆分之后，一定要配置一个命名空间
      namespaced: true,

      state: {
        // 当前登录的用户信息
        userInfo: {
          username: "张三",
          userAge: 18,
        },
      },

      getters: {
        username(state) {
          return state.userInfo.username;
        },
      },
    },
  },
});
